popupMenu: Replace ornament unicode with icons

Ported from Sam Hewett's Merge-Request.
https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2308#8714a3530d73823716c0f8334aceaabeaccd01b7

The CHECK ornament used in powerprofile and volume control is not very
pleasant looking, specially if system font is changed.
Replace CHECK and DOT unicode ornament with revelant icons in popupMenu.

Solves issue: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/6055

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2767>

diff --git a/data/gnome-shell-icons.gresource.xml b/data/gnome-shell-icons.gresource.xml
index fb33b22dc552a4ddcdf872b1470cbbdd2c56f502..c1e575c44f48a658c030cdbc26cff73f99df7bd2 100644 (file)
--- a/data/gnome-shell-icons.gresource.xml
+++ b/data/gnome-shell-icons.gresource.xml
@@ -5,6 +5,8 @@
     <file>scalable/actions/carousel-arrow-next-symbolic.svg</file>
     <file>scalable/actions/carousel-arrow-previous-symbolic.svg</file>
     <file>scalable/actions/dark-mode-symbolic.svg</file>
+    <file>scalable/actions/ornament-check-symbolic.svg</file>
+    <file>scalable/actions/ornament-dot-symbolic.svg</file>
     <file>scalable/actions/pointer-double-click-symbolic.svg</file>
     <file>scalable/actions/pointer-drag-symbolic.svg</file>
     <file>scalable/actions/pointer-primary-click-symbolic.svg</file>

diff --git a/data/icons/scalable/actions/ornament-check-symbolic.svg b/data/icons/scalable/actions/ornament-check-symbolic.svg
new file mode 100644 (file)
index 0000000..7a9551f
--- /dev/null
+++ b/data/icons/scalable/actions/ornament-check-symbolic.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg height="16px" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg">
+    <path d="m 13.753906 4.660156 c 0.175782 -0.199218 0.261719 -0.460937 0.246094 -0.726562 c -0.019531 -0.265625 -0.140625 -0.511719 -0.339844 -0.6875 c -0.199218 -0.175782 -0.460937 -0.261719 -0.726562 -0.246094 c -0.265625 0.019531 -0.511719 0.140625 -0.6875 0.339844 l -6.296875 7.195312 l -2.242188 -2.242187 c -0.390625 -0.390625 -1.023437 -0.390625 -1.414062 0 c -0.1875 0.1875 -0.292969 0.441406 -0.292969 0.707031 s 0.105469 0.519531 0.292969 0.707031 l 3 3 c 0.195312 0.195313 0.464843 0.304688 0.738281 0.292969 c 0.277344 -0.007812 0.539062 -0.132812 0.722656 -0.339844 z m 0 0" fill="#2e3436"/>
+</svg>

diff --git a/data/icons/scalable/actions/ornament-dot-symbolic.svg b/data/icons/scalable/actions/ornament-dot-symbolic.svg
new file mode 100644 (file)
index 0000000..e9d7ec1
--- /dev/null
+++ b/data/icons/scalable/actions/ornament-dot-symbolic.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg height="16px" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg">
+    <path d="m 11 8 c 0 1.65625 -1.34375 3 -3 3 s -3 -1.34375 -3 -3 s 1.34375 -3 3 -3 s 3 1.34375 3 3 z m 0 0" fill="#2e3436"/>
+</svg>

diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index a69d38175cf31c16897ad25fbbce9ae9ed92ce01..1aaeb2f4d018013f68c596b551546bb1dd319703 100644 (file)
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -344,9 +344,6 @@
   transition-duration: 100ms;
   padding: $base_padding*1.5 $base_padding*2;
 
-  &:ltr {padding-left: $base_padding;}
-  &:rtl {padding-right: $base_padding;}
-
   @if $flat {
     @include button(undecorated);
     box-shadow: none !important;

diff --git a/data/theme/gnome-shell-sass/widgets/_popovers.scss b/data/theme/gnome-shell-sass/widgets/_popovers.scss
index 6ab20c21b0f93417f6cd78f0eaabb5540e8cf75c..6ff850a1446e9929f05904b6f5e25feefafb82b7 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_popovers.scss
+++ b/data/theme/gnome-shell-sass/widgets/_popovers.scss
@@ -76,7 +76,8 @@ $submenu_bg_color: lighten($menu_bg_color, 7%);
   }
 
   .popup-menu-ornament {
-    min-width: $base_icon_size !important;
+    icon-size: $base_icon_size !important;
+    width: $base_icon_size;
   }
 
   // submenu specific styles
@@ -103,12 +104,8 @@ $submenu_bg_color: lighten($menu_bg_color, 7%);
 
 // container for radio and check boxes
 .popup-menu-ornament {
-  @extend %heading;
-  width: 1.2em;
-  text-align: center !important;
-
-  &:ltr { text-align: right;}
-  &:rtl { text-align: left;}
+  icon-size: $base_icon_size !important;
+  width: $base_icon_size;
 }
 
 // separator

diff --git a/js/ui/popupMenu.js b/js/ui/popupMenu.js
index 07be67ef36826275ddf0ee96f2afc7a77fb6db63..8565036aa0c439766b02042a990e6692ea4c078d 100644 (file)
--- a/js/ui/popupMenu.js
+++ b/js/ui/popupMenu.js
@@ -89,8 +89,8 @@ var PopupBaseMenuItem = GObject.registerClass({
         this._delegate = this;
 
         this._ornament = Ornament.NONE;
-        this._ornamentLabel = new St.Label({ style_class: 'popup-menu-ornament' });
-        this.add(this._ornamentLabel);
+        this._ornamentIcon = new St.Icon({style_class: 'popup-menu-ornament'});
+        this.add(this._ornamentIcon);
 
         this._parent = null;
         this._active = false;
@@ -239,17 +239,17 @@ var PopupBaseMenuItem = GObject.registerClass({
         this._ornament = ornament;
 
         if (ornament == Ornament.DOT) {
-            this._ornamentLabel.text = '\u2022';
+            this._ornamentIcon.icon_name = 'ornament-dot-symbolic';
             this.add_accessible_state(Atk.StateType.CHECKED);
         } else if (ornament == Ornament.CHECK) {
-            this._ornamentLabel.text = '\u2713';
+            this._ornamentIcon.icon_name = 'ornament-check-symbolic';
             this.add_accessible_state(Atk.StateType.CHECKED);
         } else if (ornament == Ornament.NONE || ornament == Ornament.HIDDEN) {
-            this._ornamentLabel.text = '';
+            this._ornamentIcon.icon_name = '';
             this.remove_accessible_state(Atk.StateType.CHECKED);
         }
 
-        this._ornamentLabel.visible = ornament != Ornament.HIDDEN;
+        this._ornamentIcon.visible = ornament !== Ornament.HIDDEN;
     }
 });
 
@@ -448,7 +448,7 @@ class PopupImageMenuItem extends PopupBaseMenuItem {
         this.add_child(this.label);
         this.label_actor = this.label;
 
-        this.set_child_above_sibling(this._ornamentLabel, this.label);
+        this.set_child_above_sibling(this._ornamentIcon, this.label);
 
         this.setIcon(icon);
     }

diff --git a/js/ui/status/backgroundApps.js b/js/ui/status/backgroundApps.js
index f5db921818219f0a6569004ace5cb8e67d481829..204d0e4985b0641517ab0c765fbdca45fda8829f 100644 (file)
--- a/js/ui/status/backgroundApps.js
+++ b/js/ui/status/backgroundApps.js
@@ -77,7 +77,7 @@ var BackgroundAppMenuItem = GObject.registerClass({
             (bind, source) => [true, source !== null],
             null);
 
-        this.set_child_above_sibling(this._ornamentLabel, null);
+        this.set_child_above_sibling(this._ornamentIcon, null);
 
         this._spinner = new Spinner(16, {hideOnStop: true});
         this._spinner.add_style_class_name('spinner');